<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../js/leaflet/leaflet.css"/>

    <script type="text/javascript" src="../js/echarts.js"></script>

    <script type="text/javascript" src="../js/leaflet/leaflet.js"></script>
    <script type="text/javascript" src="../js/jquery-3.1.1.js"></script>

    <script src="../js/leaflet/leaflet-heat.js"></script>

    <title>leaflet_map</title>
    <style>
        #main {
            width: 600px;
            height: 400px;
            border: 1px;
        }
        #map {
            width: 100%;
            height: 100%;
            border: 1px;
        }

    </style>
</head>

<body>

<div id="map"></div>

<script type="text/javascript">
    var osmUrl = '/tiles/{z}/{x}/{y}.png',
        osmAttrib = 'wangchaojie',
        // osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {
            minZoom: 1,
            maxZoom: 7
          /*  ,
            attribution: osmAttrib*/
        });

    var map = L.map('map')
        .setView([31.60,104.71],6)
        .addLayer(osm);

/*    L.marker([31.68,104.77]).addTo(map)
        .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();*/

    L.circle([31.728,104.677], 5000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(map).bindPopup("I am a circle.");


    var div = L.DomUtil.create('div');
    var chart = echarts.init(div, '', {
        width: 500,
        height: 300
    });

    var option = {
        title: {
            text: '大数据全国城市平均薪资'
        },
        tooltip: {},
        legend: {
            data: ['工资']
        },
        xAxis: {
            data: ["北京", "上海", "广州", "深圳", "杭州", "武汉"]
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {
                    show: true,

                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        yAxis: {},
        series: [{
            name: '薪资',
            type: 'bar',
            data: [25000, 26000, 20000, 20000, 24983, 18000]
        }]
    };
    chart.setOption(option);
    L.circle([37.728,120.677], 5000, {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5
    }).addTo(map).bindPopup(div,{maxWidth: 500});
    //     .bindPopup(function () {
    //     chart.setOption(option);
    //     return chart.getDom();
    // }, {maxWidth: 600});


    var content = L.DomUtil.create('p', 'custom-popup');


    function f() {
        alert('测试'+
            $("#stuname").val()+$("#b1").text()     )
    }
    var popup = L.popup();

    function onMapClick(e) {
        var v = e.latlng.toString()

        content.innerHTML = "<b id='b1'>"+v+"</b>"+"<br><b>请输入内容</b>"+
            "<br><label title='名字' for='stuname' >名称：</label><input id='stuname'></input><br>" +
            "<button title='确定' onclick=f()>确定</button>"

        popup
            .setLatLng(e.latlng)
            // .setContent(content+"You clicked the map at " + e.latlng.toString())
            .setContent(content)
            .openOn(map);

    }
    map.on('click', onMapClick);


</script>

</body>

</html>